<template>
	<div class="content">
		<div class="header">
			<div class="header-left">
				<img @click="sidebarShow = !sidebarShow" class="menu" src="@/static/1.png" mode=""></img>
				<div class="logo">
					<img class="logo-img" src="@/static/16.png" mode=""></img>
				</div>
			</div>
			<div class="header-right-con">
				<div class="localeChange" @click="onLocaleChange">
					<img class="language" src="/static/language.png" mode=""></img>
					<text>{{ $t('language') }}</text>
				</div>
				<div class="header-right">{{ $t('connect') }}</div>
			</div>
		</div>
		<Sidebar :sidebarShow="sidebarShow" @closure="closure" @invite="invite" class="sidebar"></Sidebar>
		<div class="chain-top">
			<img v-if="$i18n.locale == 'en'" class="text-img" src="/static/2.png" mode=""></img>
			<img v-else class="text-img" src="/static/2-1cn.png" mode=""></img>
			<img class="user-img" src="/static/user.png" mode=""></img>
		</div>
		<div class="chain-intro">
			<div class="intro-text">{{ $t('introduce') }}</div>
			<div class="intro-text">{{ $t('introduce1') }}</div>
			<div class="intro-text">{{ $t('introduce2') }}</div>
			<div class="roadmap">{{ $t('path') }}</div>
			<div class="intro-text">{{ $t('target') }}</div>
			<scroll-div scroll-y="true" class="scroll-con">
				<div class="line"></div>
				<div class="scroll-item" v-for="(item, index) in scrollArr" :key="index">
					<text class="item-per">{{ item.per }}%</text>
					<text class="item-text">{{ item.text }}</text>
				</div>
			</scroll-div>
		</div>
		<div class="user-list">
			<div class="user-item" v-for="(val, i) in userList" :key="i">
				<div class="item-logo">
					<img class="img" src="@/static/16.png" mode="" />
				</div>
				<div class="user-con">
					<div class="swiper-con">
						<swiper class="swiper" circular autoplay :interval="2000"
							v-if="$i18n.locale == 'en' || $i18n.locale == 'cn' && i != 1">
							<swiper-item v-for="(item, index) in val.imgs">
								<!-- <div class="get-con" v-if="i == 1">
									<div class="get">{{$t('get')}}：</div>
									<div class="num">
										<div class="">420000000</div>
										<img class="getimg" src="/static/16.png" mode=""></img>
									</div>
								</div> -->
								<img class="img" :src="item" mode="" />
							</swiper-item>
						</swiper>
						<swiper class="swiper" circular autoplay :interval="2000" v-if="$i18n.locale == 'cn' && i == 1">
							<swiper-item v-for="(item, index) in val.imgsCn">
								<img class="img" :src="item" mode="" />
							</swiper-item>
						</swiper>
					</div>
					<div class="user-con-right" :class="{ 'right7': i == 6 }">
						<div class="title">{{ val.title }}</div>
						<div class="right-info" v-if="i == 0">
							<div class="right-item">{{ $t('supply') }}: 10000</div>
							<div class="right-item">{{ $t('consume') }}: 450000000 RND</div>
							<div class="right-item">{{ $t('property') }}:</div>
							<div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
							<div class="right-item">{{ $t('site') }}: 0/5</div>
						</div>
						<!-- <div class="right-info" v-if="i == 1">
							<div class="right-item">{{$t('burn')}}:{{$t('aSheet')}}</div>
							<div class="right-item">{{$t('noOperation')}}</div>
						</div> -->
						<div class="right-info" v-if="i == 1">
							<div class="right-item">{{ $t('supply') }}: 10000</div>
							<div class="right-item">{{ $t('price') }}: 0.013ETH</div>
							<div class="right-item">{{ $t('get') }}:{{ $t('eachA') }}</div>
							<div class="right-item">{{ $t('function') }}: {{ $t('growingFuel') }}</div>
							<div class="right-item">{{ $t('site') }}: 0/10</div>
						</div>
						<div class="right-info right2-6" v-if="i == 2">
							<div class="right-item">{{ $t('supply') }}: {{ $t('iteminfo4-1') }}</div>
							<div class="right-item">{{ $t('burn') }}: {{ $t('aSheet') }}</div>
							<div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo4-3') }}</div>
							<div class="right-item">{{ $t('property') }}: ???</div>
							<div class="right-item">{{ $t('function') }}: {{ $t('iteminfo4-4') }}</div>
							<div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
							<div class="right-item">{{ $t('function') }}: {{ $t('iteminfo4-5') }}</div>
						</div>
						<div class="right-info" v-if="i == 3">
							<div class="right-item">{{ $t('supply') }}:???</div>
							<div class="right-item">{{ $t('burn') }}: ?00000000RND</div>
							<div class="right-item">{{ $t('function') }}:{{ $t('iteminfo5-1') }}</div>
						</div>
						<div class="right-info" v-if="i == 4">
							<div class="right-item">{{ $t('supply') }}: ???</div>
							<div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo6-1') }}</div>
							<div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo6-2') }}</div>
							<div class="right-item">{{ $t('property') }}: ???</div>
							<div class="right-item">{{ $t('function') }}: {{ $t('iteminfo6-3') }}</div>
						</div>
						<div class="right-info" v-if="i == 5">
							<div class="right-item">{{ $t('burn') }}:?0000000ORND</div>
							<div class="right-item">{{ $t('function') }}: ?</div>
						</div>
						<div class="right-info right2-6-6" v-if="i == 6">
							<div class="right-item">{{ $t('supply') }}:{{ $t('iteminfo8-1') }}</div>
							<div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo8-2') }}</div>
							<div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo8-3') }}</div>
							<div class="right-item">{{ $t('property') }}:???</div>
							<div class="right-item">{{ $t('function') }}: {{ $t('iteminfo8-4') }}</div>
							<div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
							<div class="right-item">{{ $t('function') }}:{{ $t('iteminfo4-5') }}</div>
							<div class="right-item">{{ $t('function') }}:{{ $t('iteminfo8-5') }}</div>
							<div class="right-item">{{ $t('function') }}:???</div>
						</div>
						<div class="right-info" v-if="i == 7">
							<div class="right-item">{{ $t('burn') }}: ?</div>
							<div class="right-item">{{ $t('function') }}: ?</div>
						</div>
					</div>
				</div>
				<div class="quantity">
					<QuantityStatistics v-if="val.type == 1" @subBtn="subfun" @addBtn="addfun"></QuantityStatistics>
				</div>
				<div class="btn" :class="{ 'active-btn': i > 1 }">{{ val.btnText }}</div>
			</div>
		</div>
		<div class="invite-box" v-if="inviteShow">
			<div class="invite-con">
				<img class="close-btn" src="../../static/colse.png" @click="inviteShow = false" mode=""></img>
				<img class="copy-btn" src="../../static/copy.png" @click="copy('df45fddsf4sd5ds78f4ds5f4d8f4f1dsf')" mode="">
				</img>
				<div class="invite-item">
					<text>{{ $t('youInvitee') }}: </text>
					<input class="invitee-input" type="text">
				</div>
				<text class="btn">{{ $t('bind') }}</text>
				<div class="invite-item youLink">
					<div>{{ $t('youLink') }}: <text class="youLink-text">df45fddsf4sd5ds78f4ds5f4d8f4f1dsf</text></div>
				</div>
				<text class="btn">{{ $t('generate') }}</text>
			</div>
		</div>
	</div>
</template>

<script setup>
import QuantityStatistics from '@/components/quantityStatistics.vue'
import Sidebar from '@/components/sidebar.vue'
export default {
	components: {
		QuantityStatistics,
		Sidebar
	},
	computed: {
		scrollArr() {
			return [
				{ per: 10, text: this.$t('percentage10') },
				{ per: 20, text: this.$t('percentage20') },
				{ per: 30, text: this.$t('percentage30') },
				{ per: 40, text: this.$t('percentage40') },
				{ per: 50, text: this.$t('percentage50') },
				{ per: 60, text: this.$t('percentage60') },
				{ per: 70, text: this.$t('percentage70') },
				{ per: 80, text: this.$t('percentage80') },
				{ per: 90, text: this.$t('percentage90') },
				{ per: 100, text: this.$t('percentage100') }
			]
		},
		userList() {
			return [
				{
					type: 1,
					btnType: 1,
					btnText: this.$t('cast'),
					title: this.$t('listName1'),
					imgs: [require('@/static/4-1.png'), require('@/static/4-2.png'), require('@/static/4-3.png'), require('@/static/4-4.png'), require('@/static/4-5.png')]
				},
				// {
				// 	type:2,
				// 	btnType:2,
				// 	btnText:this.$t('removePledge'),
				// 	title:this.$t('listName2'),
				// 	imgs:[require('@/static/3.png')]
				// },
				{
					type: 1,
					btnType: 3,
					btnText: this.$t('cast'),
					title: this.$t('listName3'),
					imgs: [require('@/static/3-1.png'), require('@/static/3-2.png'), require('@/static/3-3.png'), require('@/static/3-4.png'), require('@/static/3-5.png')],
					imgsCn: [require('@/static/3-1-cn.png'), require('@/static/3-2-cn.png'), require('@/static/3-3-cn.png'), require('@/static/3-4-cn.png'), require('@/static/3-5-cn.png')]
				},
				{
					type: 2,
					btnType: 3,
					btnText: this.$t('cast'),
					title: this.$t('listName4'),
					imgs: [require('@/static/horse.png')]
				},
				{
					type: 2,
					btnType: 3,
					btnText: this.$t('cast'),
					title: this.$t('listName5'),
					imgs: [require('@/static/9.png')]
				},
				{
					type: 2,
					btnType: 3,
					btnText: this.$t('cast'),
					title: this.$t('listName6'),
					imgs: [require('@/static/horse-1.png')]
				},
				{
					type: 2,
					btnType: 3,
					btnText: this.$t('cast'),
					title: '???',
					imgs: [require('@/static/9.png')]
				},
				{
					type: 2,
					btnType: 3,
					btnText: this.$t('cast'),
					title: this.$t('listName8'),
					imgs: [require('@/static/horse-2.png')]
				},
				{
					type: 2,
					btnType: 3,
					btnText: this.$t('cast'),
					title: this.$t('listName9'),
					imgs: [require('@/static/9.png')]
				},
			]
		},
		contract() {
			return new web3.value.eth.Contract(USDT_API, USDT_ADDRESS)
		},
	},
	data() {
		return {
			sidebarShow: false,
			inviteShow: false,
			num: 0,

		}
	},
	onLoad() {

	},
	methods: {
		onLocaleChange() {
			let language_key = localStorage.getItem('language_key')
			let value
			if (language_key) {
				value = language_key == 'en' ? 'cn' : 'en'
			} else {
				value = 'cn'
			}
			localStorage.setItem('language_key', value)
			this.$i18n.locale = value
		},
		addfun(param) {
			console.log(param)
		},
		subfun(param) {
			console.log(param)
		},
		closure(param) {
			this.sidebarShow = param
		},
		invite(param) {
			this.inviteShow = param
		},
		// 复制
		copy(value) {

			// uni.setClipboardData({
			// 	data: value,
			// 	success: () => {
			// 		uni.showToast({
			// 			title: '复制成功'
			// 		})
			// 	}
			// })
		},
		async handleWalletConnect() {
			await onConnect()
			if (connected) {
				console.log('afterConnectdWallet', connected)
			}
		},
		approve() {
			return contract.value.methods
				.approve(USDT_ADDRESS, utils.toHex(utils.toWei('1000000000000000000000000000', 'gwei')))
				.send({ from: userAddress.value })
		}
	}
}
</script>

<style lang="scss">
.header {
	height: 120rpx;
	width: 94%;
	background-color: #059EA3;
	display: flex;
	justify-content: space-between;
	padding: 0 3%;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 102;

	.header-left {
		display: flex;
		align-items: center;

		.menu {
			width: 80rpx;
			height: 90rpx;
		}

		.logo {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;

			.logo-img {
				width: 50rpx;
				height: 50rpx;
				border: 4rpx solid #90CAA1;
				border-radius: 40rpx;
			}
		}
	}

	.header-right {
		font-size: 40rpx;
		text-align: center;
		color: #f5f5f5;
		border-radius: 30rpx;
		line-height: 80rpx;
		background-color: #FB8DD4;
		height: 90rpx;
		width: 190rpx;
	}

	.header-right-con {
		display: flex;
		align-items: center;
		color: #fff;

		.localeChange {
			display: flex;
			align-items: center;
			margin-right: 18rpx;
		}
	}

	.language {
		width: 50rpx;
		height: 50rpx;
		margin-right: 6rpx;
	}
}

.sidebar {
	position: fixed;
	top: 120rpx;
	left: 0;
	z-index: 101;
}

.chain-top {
	padding-top: 120rpx;
	height: 700rpx;
	background-color: #71C9F9;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;

	.text-img {
		width: 540rpx;
		height: 230rpx;
		margin-top: 40rpx;
		margin-left: 120rpx;
	}

	.user-img {
		width: 320rpx;
	}
}

.chain-intro {
	background: #059EA3;
	padding-bottom: 30rpx;

	.intro-text {
		padding: 20rpx 40rpx;
		color: #B2EEF1;
		line-height: 50rpx;
		text-indent: 30rpx;
		font-size: 27rpx;

		.rnd {
			color: #D1FE86;
			margin: 0 10rpx;
		}
	}

	.roadmap {
		color: #F1FEFE;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.scroll-con {
		border: 10rpx solid #068C91;
		height: 300rpx;
		width: 94%;
		margin-left: 2%;
		margin-bottom: 20rpx;

		.line {
			height: 3rpx;
			width: 96%;
			margin-left: 10rpx;
			background-color: #fff;
			position: absolute;
			top: 48rpx;
		}

		.scroll-item {
			font-size: 30rpx;
			color: #000;
			padding: 0 10rpx;
			margin-top: 30rpx;
			display: flex;
			align-items: flex-start;

			.item-per {
				color: #C5F387;
				display: inline-block;
				width: 12%;
			}

			.item-text {
				display: inline-block;
				width: 88%;
			}
		}
	}
}

.user-list {
	background-color: #69C4F9;
	padding-top: 80rpx;
	padding-bottom: 100rpx;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;

	.user-item {
		height: 490rpx;
		width: 660rpx;
		border-radius: 40rpx;
		border: 10rpx solid #029A9D;
		background-color: #76CFD5;
		padding: 0 30rpx;
		padding-right: 0;
		position: relative;
		margin-bottom: 80rpx;

		.item-logo {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: -40rpx;
			left: 45%;

			.img {
				width: 60rpx;
				height: 60rpx;
				border: 6rpx solid #0299A6;
				border-radius: 40rpx;
			}
		}

		.user-con {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.swiper-con {
				width: 260rpx;
				height: 260rpx;
				border: 8rpx solid #0299A6;
				border-radius: 40rpx;
				overflow: hidden;
				position: relative;
				z-index: 99;

				.img {
					width: 260rpx;
					height: 260rpx;
				}

				.get-con {
					position: absolute;
					top: 56rpx;
					left: 20rpx;
					z-index: 1;
				}

				.get {
					font-size: 40rpx;
					font-weight: bold;
				}

				.num {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				.getimg {
					width: 30rpx;
					height: 30rpx;
					margin-left: 8rpx;
				}
			}

			.user-con-right {
				width: 58%;
				margin-top: 20rpx;
				font-size: 28rpx;

				.title {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
					text-align: center;
				}

				.right-info {
					margin-left: 36rpx;
					font-size: 24rpx;

					.right-item {
						margin-bottom: 4rpx;
					}
				}

				.right2-6 {
					margin-left: 10rpx;
				}

				.right2-6-6 {
					margin-left: 0;
				}
			}

			.right7 {
				margin-top: 0;
			}
		}

		.quantity {
			margin-top: 14rpx;
			display: flex;
			justify-content: center;
		}

		.btn {
			width: 380rpx;
			height: 90rpx;
			color: #EDF90B;
			font-size: 34rpx;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
			background: #03989E;
			position: absolute;
			left: 150rpx;
			bottom: 10rpx;
		}

		.active-btn {
			color: #A6A6A6;
		}
	}
}

.invite-box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;

	.invite-con {
		min-height: 380rpx;
		width: 630rpx;
		border-radius: 40rpx;
		border: 10rpx solid #029A9D;
		background-color: #76CFD5;
		padding: 0 30rpx;
		position: relative;
		padding-top: 100rpx;
		padding-bottom: 40rpx;

		.close-btn {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		.copy-btn {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			bottom: 60rpx;
			right: 40rpx;
		}

		.invite-item {
			display: flex;
		}

		.invitee-input {
			border: 2rpx solid #279491;
			padding: 4rpx 8rpx;
			width: 380rpx;
			margin-left: 20rpx;
		}

		.btn {
			padding: 0 20rpx;
			color: #fff;
			background-color: #069EA3;
			border-radius: 26rpx;
			display: inline-block;
			height: 76rpx;
			line-height: 70rpx;
			margin-top: 40rpx;
			margin-left: 240rpx;
		}
	}

	.youLink {
		margin-top: 40rpx;
		word-break: break-all;

		.youLink-text {
			color: #fff;
			margin-left: 10rpx;
		}
	}
}
</style>
